<template>
  <div id="home">
    <div class="option">
      <el-col>
        <Search />
        <Sendpiece />
      </el-col>
    </div>
    <!-- <transition name="el-fade-in-linear"> -->
    <div class="aaa">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

    <!-- </transition> -->
    <News />
  </div>
</template>

<script>
import Search from "./Search.vue";
import Sendpiece from "./Sendpiece.vue";
import News from "./News.vue";
export default {
  name: "Home",
  data() {
    return {
      count: 2,
      timer: null,
    }
  },
  components: { Search, Sendpiece, News },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('scroll', () => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        if (scrollHeight === scrollTop + windowHeight) {
          clearTimeout(this.timer)
          this.timer = null
          this.timer = setTimeout(() => {
            console.log(this.count)
            this.count++
            this.$store.dispatch('getNews', this.count)
          }, 2000)
        }
        // console.log(clientHeight);
      })
    })
  }
};
</script>
<style lang="scss" scoped>
.option {
  background-color: #ffffff;
  padding: 2px;
  width: 100px;
  position: absolute;
  left: 0px;
}

.show-main {
  transition: all 0.2 ease;
}

.aaa {
  transition: all 1s ease;
}
</style>
